<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>慕课书评网</title>
    <meta name="referrer" content="no-referrer">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="./resources/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="./resources/raty/lib/jquery.raty.css">
    <script src="./resources/jquery.3.3.1.min.js"></script>
    <script src="./resources/bootstrap/bootstrap.min.js"></script>
    <script src="./resources/art-template.js"></script>
    <script src="./resources/raty/lib/jquery.raty.js"></script>

    <style>
        .highlight {
            color: red !important;
        }

        a:active {
            text-decoration: none !important;
        }
    </style>


    <style>
        .container {
            padding: 0px;
            margin: 0px;
        }

        .row {
            padding: 0px;
            margin: 0px;
        }

        .col- * {
            padding: 0px;
        }
    </style>
    <#--    书列表模板-->
    <script id="tpl" type="text/html">
        <a href="/book/{{bookId}}" style="color: inherit">
            <div class="row mt-2 book">
                <div class="col-4 mb-2 pr-2">
                    <img class="img-fluid" src="{{cover}}">
                </div>
                <div class="col-8  mb-2 pl-0">
                    <h5 class="text-truncate">{{bookName}}</h5>

                    <div class="mb-2 bg-light small  p-2 w-100 text-truncate">{{author}}</div>


                    <div class="mb-2 w-100">{{subTitle}}</div>

                    <p>
                        <#--                        data-score是固定的，{{evaluationScore}}为5分制-->
                        <span class="stars" data-score="{{evaluationScore}}" title="gorgeous"></span>
                        <span class="mt-2 ml-2">{{evaluationScore}}</span>
                        <span class="mt-2 ml-2">{{evaluationQuantity}}</span>
                    </p>
                </div>
            </div>
        </a>

    </script>
    <script>
        /*$.fn是指jQuery的命名空间，加上fn的方法及属性，会对jQuery实例有效。
        如扩展$.fn.abc(),即$.fn.abc()是对jQuery扩展了一个abc()方法，
        在每一个jquery实例都可以引用这个方法，例如$("#div").abc();*/
        $.fn.raty.defaults.path = "./resources/raty/lib/images"
        // loadMore()加载更多数据，实现代码复用
        // isReset参数设置为true，代表从第一页开始查询，否则按nextPage查询后续页
        function loadMore(isReset) {
            if (isReset == true) {
                // 对图书列表清空，进行重置
                $("#bookList").html("")
                $("#nextPage").val(1)
            }
            var nextPage = $("#nextPage").val();
            var catagoryId = $("#categoryId").val();
            var order = $("#order").val()
            $.ajax({
                url: "/book",
                data: {"categoryId": catagoryId, "order": order, "p": nextPage},
                type: "get",
                dataType: "json",
                success: function (json) {
                    console.info(json);
                    var list = json.records;
                    for (var i = 0; i < list.length; i++) {
                        var book = json.records[i];
                        //var html = "<li>" + book.bookName + "</li>";
                        //template是一个方法，将数据结合tpl模板，生成html
                        var html = template("tpl", book)
                        // 在控制台查看生成的HTML
                        console.info(html)
                        $("#bookList").append(html);
                    }
                    // 显示星型评价组件
                    $(".stars").raty({readOnly: true})
                    // json.current为当前页号
                    // 如果全部数据显示完毕，显示没有更多按钮
                    if (json.current < json.pages) {
                        // JavaScript是弱类型语言，需要转换，否则json.current是字符串
                        $("#nextPage").val(parseInt(json.current) + 1);
                        $("#btnMore").show();
                        $("#divNoMore").hide();
                    } else {
                        $("#btnMore").hide();
                        $("#divNoMore").show();
                    }
                }
            })
        }

        $(function () {
            /* $.ajax({
                 url: "/book",
                 data: {"p": 1},
                 type: "get",
                 dataType: "json",
                 success: function (json) {
                     console.info(json);
                     var list = json.records;
                     for (var i = 0; i < list.length; i++) {
                         var book = json.records[i];
                         //var html = "<li>" + book.bookName + "</li>";
                         //template是一个方法，将数据结合tpl模板，生成html
                         var html = template("tpl",book)
                         // 在控制台查看生成的HTML
                         console.info(html)
                         $("#bookList").append(html);
                     }
                     // 显示星型评价组件
                     $(".stars").raty({readOnly : true})
                 }
             })*/
            loadMore(true);
        })
        //绑定加载更多按钮单击事件
        $(function () {
            //点击加载更多显示数据
            $("#btnMore").click(function () {
                /* var nextPage = $("#nextPage").val();
                 $.ajax({
                     url: "/book",
                     data: {"p":nextPage},
                     type: "get",
                     dataType: "json",
                     success: function (json) {
                         console.info(json);
                         var list = json.records;
                         for (var i = 0; i < list.length; i++) {
                             var book = json.records[i];
                             //var html = "<li>" + book.bookName + "</li>";
                             //template是一个方法，将数据结合tpl模板，生成html
                             var html = template("tpl",book)
                             // 在控制台查看生成的HTML
                             console.info(html)
                             $("#bookList").append(html);
                         }
                         // 显示星型评价组件
                         $(".stars").raty({readOnly : true})
                         // json.current为当前页号
                         // 如果全部数据显示完毕，显示没有更多按钮
                         if (json.current < json.pages){
                             // JavaScript是弱类型语言，需要转换，否则json.current是字符串
                             $("#nextPage").val(parseInt(json.current) + 1);
                             $("#btnMore").show();
                             $("#divNoMore").hide();
                         }else {
                             $("#btnMore").hide();
                             $("#divNoMore").show();
                         }
                     }
                 })*/
                loadMore();
            })

            $(".category").click(function () {
                $(".category").removeClass("highlight");
                $(".category").addClass("text-black-50");
                $(this).addClass("highlight");
                <#--data("category")对应下方data-category属性的${category.categoryId}    -->
                var categoryId = $(this).data("category");
                // 隐藏域的categoryId赋值
                $("#categoryId").val(categoryId);
                // 每次点击图书类别的时候，相当于重新查询
                loadMore(true);
            })
            $(".order").click(function () {
                $(".order").removeClass("highlight");
                $(".order").addClass("text-black-50");
                $(this).addClass("highlight");
                var order = $(this).data("order");
                $("#order").val(order);
                loadMore(true);
            })
        })

    </script>

</head>
<body>
<div class="container">
    <nav class="navbar navbar-light bg-white shadow mr-auto">
        <ul class="nav">
            <li class="nav-item">
                <a href="/">
                    <img src="https://m.imooc.com/static/wap/static/common/img/logo2.png" class="mt-1"
                         style="width: 100px">
                </a>
            </li>

        </ul>
<#--        ??代表色是前边的属性存在的情况下-->
        <#if loginMember??>
            <h6 class="mt-1">
                <img style="width: 2rem;margin-top: -5px" class="mr-1" src="./images/user_icon.png">${loginMember.nickname}
            </h6>
            <#else >
                <a href="/login.html" class="btn btn-light btn-sm">
                    <img style="width: 2rem;margin-top: -5px" class="mr-1" src="./images/user_icon.png">登录
                </a>
        </#if>

    </nav>
    <div class="row mt-2">


        <div class="col-8 mt-2">
            <h4>热评好书推荐</h4>
        </div>

        <div class="col-8 mt-2">
            <span data-category="-1" style="cursor: pointer" class="highlight  font-weight-bold category">全部</span>
            |
            <#list categoryList as category>
                <a style="cursor: pointer;" data-category="${category.categoryId}"
                   class="text-black-50 font-weight-bold category">${category.categoryName}</a>
                <#if category_has_next>|</#if>
            </#list>


        </div>

        <div class="col-8 mt-2">
            <span data-order="quantity" style="cursor: pointer"
                  class="order highlight  font-weight-bold mr-3">按热度</span>

            <span data-order="score" style="cursor: pointer"
                  class="order text-black-50 mr-3 font-weight-bold">按评分</span>
        </div>
    </div>
    <div class="d-none">
        <input type="hidden" id="nextPage" value="2">
        <input type="hidden" id="categoryId" value="-1">
        <input type="hidden" id="order" value="quantity">
    </div>

    <div id="bookList">


    </div>
    <button type="button" id="btnMore" data-next-page="1" class="mb-5 btn btn-outline-primary btn-lg btn-block">
        点击加载更多...
    </button>
    <div id="divNoMore" class="text-center text-black-50 mb-5" style="display: none;">没有其他数据了</div>
</div>

</body>
</html>